<template>
  <div>
    <el-button @click="navTo('/richList')" size="mini" icon="el-icon-arrow-left" circle></el-button>
    <h2 class="margin-left-shi">图文编辑</h2>
      <div class="flexc-start item-center" style="width:80%;height:900px">
        <el-button type="primary" @click="onSubmit" :loading="loading" style="margin-bottom:30px">提交保存</el-button>
        <div id="summernote"></div>
      </div>
  </div>   
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      loading: false
    };
  },

  mounted() {
    let that = this;
    if(this.$route.query.id){
      $("#summernote").summernote(
      {
        lang: "zh-CN",
        placeholder:this.$route.query.id? this.$route.query.text:'请输入图文内容',
        height: 600,
        width: 660,
        htmlMode: true,
        toolbar: [
          ["style", ["bold", "italic", "underline", "clear"]],
          ["fontsize", ["fontsize"]],
          ["fontname", ["fontname"]],
          ["color", ["color"]],
          ["para", ["ul", "ol", "paragraph"]],
          ["insert", ["link", "picture"]],
          ["mybutton", ["myVideo"]]
        ],
        fontSizes: ["8", "9", "10", "11", "12", "14", "18", "24", "36"],
        fontNames: [
          "Arial",
          "Arial Black",
          "Comic Sans MS",
          "Courier New",
          "Helvetica Neue",
          "Helvetica",
          "Impact",
          "Lucida Grande",
          "Tahoma",
          "Times New Roman",
          "Verdana"
        ],
        callbacks: {
                    onImageUpload: function(files) {
            that.upload(files[0]);
          },
          onInit: function() {
            $('#summernote').summernote('code', that.$route.query.text)
          }
        }
      });
    }else{
      $("#summernote").summernote(
      {
        lang: "zh-CN",
        placeholder:this.$route.query.id? this.$route.query.text:'请输入图文内容',
        height: 600,
        width: 660,
        htmlMode: true,
        toolbar: [
          ["style", ["bold", "italic", "underline", "clear"]],
          ["fontsize", ["fontsize"]],
          ["fontname", ["fontname"]],
          ["color", ["color"]],
          ["para", ["ul", "ol", "paragraph"]],
          ["insert", ["link", "picture"]],
          ["mybutton", ["myVideo"]]
        ],
        fontSizes: ["8", "9", "10", "11", "12", "14", "18", "24", "36"],
        fontNames: [
          "Arial",
          "Arial Black",
          "Comic Sans MS",
          "Courier New",
          "Helvetica Neue",
          "Helvetica",
          "Impact",
          "Lucida Grande",
          "Tahoma",
          "Times New Roman",
          "Verdana"
        ],
        callbacks: {
          onImageUpload: function(files) {
            that.upload(files[0]);
          }
        }
      });
    }
  },

  methods: {
        //跳转添加楼栋
    navTo(path) {
      this.$router.push({ path: path });
    },
    upload(file) {
      let param = new FormData();
      param.append("file", file); 
      this.$http
        .post("https://www.chuyinkeji.cn/ops/filesystem/upfile", param)
        .then(function(res) {
          $('#summernote').summernote('insertImage', res.bodyText)
          if (!res.data.code) {
            this.$message({
              showClose: true,
              type: "error",
              message: "图片过大100kb"
            });
          }
        })
    },
    onSubmit() {
      var that = this;
      this.loading = true;
      if(this.$route.query.id){
        this.$http
          .post(this.com.NODE_API + "/ops/rich/text/update", {parentId:sessionStorage.getItem("schoolId"),text:$("#summernote").summernote("code"),typ:0,id:this.$route.query.id}, {
            headers: { token: sessionStorage.getItem("token") },
            emulateJSON: true
          })
          .then(res => {
            if (res.data.code) {
              that.$message({
                showClose: true,
                type: "success",
                message: '更新成功'
              });
              this.$router.go(-1)
            } else {
              that.$message({
                showClose: true,
                type: "error",
                message: res.data.msg
              });
            }
            that.loading = false;
          });
      }else{
        this.$http
          .post(this.com.NODE_API + "/ops/rich/text/add", {parentId:sessionStorage.getItem("schoolId"),text:$("#summernote").summernote("code"),typ:0}, {
            headers: { token: sessionStorage.getItem("token") },
            emulateJSON: true
          })
          .then(res => {
            if (res.data.code) {
              that.$message({
                showClose: true,
                type: "success",
                message: '添加成功'
              });
              this.$router.go(-1)
            } else {
              that.$message({
                showClose: true,
                type: "error",
                message: res.data.msg
              });
            }
            that.loading = false;
          });
      }
    }
  }
};
</script>